import { AfterContentInit, AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { FormArray, FormControl, FormGroup, NgForm } from '@angular/forms';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.less']
})
export class FormComponent implements OnInit{
    contactFrom: FormGroup = new FormGroup({
        fullName: new FormGroup({
            firstName: new FormControl(),
            lastName:new FormControl()
        }),
        phone: new FormControl()
    })
    onSubmit(form:NgForm){
        console.log(form.value);
        console.log(form.valid);
    }
    onSubmit1(form:NgForm){
        console.log(form.value);
        console.log(form.valid);
    }
    onSubmit2(form:NgForm){
        console.log(form.value);
        console.log("表单是否验证通过：",form.valid);
    }
    onSubmit3(){
        console.log(this.contactFrom.value);
        console.log(this.contactFrom.value.fullName);
        console.log(this.contactFrom.value["fullName"]?.["lastName"]);
        console.log(this.contactFrom.get(["fullName","lastName"])?.value);
    }
    onSubmit4(){
        console.log(this.familyFrom.value);
        
    }

    familyFrom: FormGroup = new FormGroup({
        persons: new FormArray([])
    })
    get persons():FormArray{
        return this.familyFrom.get("persons") as FormArray
    }
    addPerson(){
        let myfamily:FormGroup = new FormGroup({
            relation:new FormControl(),
            name: new FormControl(),
            phone:  new FormControl(),
        })
        this.persons.push(myfamily);
    }
    removePerson(index:number){
        this.persons.removeAt(index)
    }
    ngOnInit(){
        this.addPerson()
        console.log("1111111111111");
        
    }
}